<template>
  <div id='main-nav'>
    <header class="header-table">
      <div class="nav-wrap">
        <img src="../assets/logo1.png" class="icon-logo" />
      </div>
      <div class="wrap-left">
        <div class="wrap-status">
          <img width="32px" height="32px" src="../assets/admin.png"
            style="border-radius: 16px; vertical-align: middle; display: inline-block; margin-left: 20px;" />
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{userInfo.nickName}} <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </header>
    <article class="content">
      <section class="flex">
        <nav class="nav-left">
          <el-menu default-active="1" class="el-menu-vertical-demo" theme="dark" :router="true">
            <template v-for="(item,index) in treeData">
              <el-menu-item v-if="item.children===null||item.children===undefined" :index="item.url" v-model="item.name"
                class="ihidden" :key="item.url">{{item.name}}</el-menu-item>

              <el-submenu v-show="item.children" :index="item.url" :key="index">
                <template slot="title">{{item.name}}</template>
                <el-menu-item v-for="model in item.children" :index="model.url" :key="model.url">
                  {{model.name}}
                </el-menu-item>
              </el-submenu>

            </template>
          </el-menu>

        </nav>
        <section class="content-right">
          <router-view></router-view>
        </section>
      </section>
    </article>
  </div>
</template>
<script>
  import AddOrder from './wxs/order/AddOrder'
  import {
    permissions
  } from '../utils/MenuList'
  export default {
    name: 'mainNav',
    components: {
      AddOrder,
    },
    data: function () {
      return {
        treeData: [],
        userInfo: {}
      }
    },
    methods: {
      handleCommand: function (command) {
        if (command === 'logout') {
          window.sessionStorage.removeItem("userInfo");
          window.location = "/"
        }
      }
    },
    computed: {
      getUserInfo: function () {
        this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
        this.treeData = permissions;
      }
    },
    mounted: function () {
      this.treeData = permissions;
    }
  }

</script>
<style>
  #main-nav {
    height: 100%;
    background: #FFF;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }

</style>
